<template>
  <div class="app-container">
    <el-form
      :model="stationQuery"
      ref="stationQuery"
      :inline="true"
      v-show="showSearch"
      class="globalSerchFormStyle"
      size="small"
      label-width="68px"
    >
      <el-row>
        <el-col :span="6" v-if="ifDelete">
          <el-form-item label="油企名称" prop="enterpriseId">
            <el-select
              v-model="stationQuery.enterpriseId"
              placeholder="请选择油企"
              size="small"
              filterable
              clearable
              style="width: 190px"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :label="item.enterpriseName"
                :value="item.enterpriseId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="['1', null].includes($store.state.user.userLevel) || ifDelete"
        >
          <el-form-item label="油站名称" prop="stationId">
            <el-select
              v-model="stationQuery.stationId"
              placeholder="请选择油站"
              size="small"
              filterable
              clearable
              style="width: 190px"
            >
              <el-option
                v-for="item in stationListQuery"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col
          :span="6"
          v-if="!['1', '2'].includes($store.state.user.userLevel)"
        >
          <el-form-item label="油站ID" prop="stationId2">
            <el-input
              v-model="stationQuery.stationId2"
              placeholder="请输入油站ID"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="!['1', '2'].includes($store.state.user.userLevel)"
        >
          <el-form-item label="油站编码" prop="stationCode">
            <el-input
              v-model="stationQuery.stationCode"
              placeholder="请输入油站编码"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="['1'].includes($store.state.user.userLevel)">
          <el-form-item label="部门状态" prop="status">
            <el-select
              v-model="stationQuery.status"
              placeholder="部门状态"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option label="启用" value="1" />
              <el-option label="停用" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="['1', '2'].includes($store.state.user.userLevel)"
        >
          <el-form-item label="创建时间" prop="createdDate">
            <el-date-picker
              size="small"
              v-model="dateRangeCreatedDate"
              style="width: 190px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="collapse">
        <el-col :span="6" v-if="!['1'].includes($store.state.user.userLevel)">
          <el-form-item label="部门状态" prop="status">
            <el-select
              v-model="stationQuery.status"
              placeholder="部门状态"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option label="启用" value="1" />
              <el-option label="停用" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="!['1', '2'].includes($store.state.user.userLevel)"
        >
          <el-form-item label="创建时间" prop="createdDate">
            <el-date-picker
              size="small"
              v-model="dateRangeCreatedDate"
              style="width: 190px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="6">
          <el-form-item label="所在地区" prop="cityValue">
            <yf-city />
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          type="primary"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          style="margin-left: 10px"
          id="closeSearchBtn"
          @click="
            (closeSearch) => {
              collapse = !collapse;
            }
          "
        >
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" @click="handleStationAdd" plain
          >新增油站</el-button
        >
      </el-col>
    </el-row>

    <!-- <el-card class="card-table"> -->
    <!-- <el-row :gutter="10" class="mb8">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
      </el-row> -->
    <el-table
      :data="stationList"
      style="width: 100%"
      v-loading="stationLoading"
      stripe
    >
      <af-table-column label="序号" width="50">
        <template slot-scope="scope">
          {{
            (stationQuery.pageNum - 1) * stationQuery.pageSize +
            scope.$index +
            1
          }}
        </template>
      </af-table-column>
      <af-table-column prop="stationId" label="油站Id" align="left">
      </af-table-column>
      <af-table-column prop="stationName" label="油站名称" align="left">
      </af-table-column>
      <af-table-column prop="stationCode" label="油站编码" align="left">
      </af-table-column>
      <!--
        <af-table-column
          prop="isAlipayFlag"
          label="是否启用支付宝"
          align="left"
        >
          <template slot-scope="scope">
            {{ scope.row.isAlipayFlag == "0" ? "关闭" : "" }}
            {{ scope.row.isAlipayFlag == "1" ? "启动" : "" }}
          </template>
        </af-table-column>
        -->
      <af-table-column prop="status" label="油站状态" align="left">
        <template slot-scope="scope">
          {{ scope.row.status == "0" ? "停用" : "" }}
          {{ scope.row.status == "1" ? "启用" : "" }}
        </template>
      </af-table-column>
      <af-table-column
        prop="enterpriseName"
        label="所属油企"
        align="left"
      ></af-table-column>
      <af-table-column
        prop="employeeAppletFlag"
        label="强制使用员工码"
        align="left"
      >
        <template slot-scope="scope">
          {{ scope.row.employeeAppletFlag == "1" ? "启用" : "停用" }}
        </template>
      </af-table-column>
      <af-table-column prop="leader" label="联系人" align="left">
      </af-table-column>
      <af-table-column prop="phone" label="联系电话" align="left">
      </af-table-column>

      <af-table-column align="left" prop="regionDataList" label="省市区">
        <template slot-scope="scope">
          {{
            !scope.row.regionDataList
              ? ""
              : translateCodeToAddress(scope.row.regionDataList).toString()
          }}
        </template>
      </af-table-column>
      <af-table-column prop="detailRegionData" label="详情地址" align="left">
      </af-table-column>
      <af-table-column prop="stationLatitude" label="油站纬度" align="left">
      </af-table-column>
      <af-table-column prop="stationLongitude" label="油站经度" align="left">
      </af-table-column>
      <af-table-column prop="createDate" label="创建时间" align="left" />
      <af-table-column
        prop="updatedTime"
        label="最近一次修改时间"
        align="left"
      />
      <af-table-column label="操作" align="left" width="160px" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleStationEdit(scope.row)"
            size="mini"
            style="margin: 0px 5px"
            >编辑</el-button
          >

          <el-button
            type="text"
            @click="handleStationDel(scope.row)"
            size="mini"
            style="margin: 0px 5px"
            >删除</el-button
          >

          <el-dropdown style="margin-left: 10px">
            <el-button class="el-dropdown-link" type="text" size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="authUser || $store.state.user.userLevel == 7"
                  @click="handlereChargeEdit(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >充值</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="authUser || $store.state.user.userLevel == 7"
                  @click="handlePayWayOpen(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >选择支付渠道</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="
                    (authUser && scope.row.isShowCommission === 0) ||
                    ($store.state.user.userLevel == 7 &&
                      scope.row.isShowCommission === 0)
                  "
                  @click="handleTongDaoFee(scope.row, 'open')"
                  size="mini"
                  style="margin: 0px 5px; color: green"
                >
                  开启通道费
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="
                    (authUser && scope.row.isShowCommission === 1) ||
                    ($store.state.user.userLevel == 7 &&
                      scope.row.isShowCommission === 1)
                  "
                  @click="handleTongDaoFee(scope.row, 'close')"
                  size="mini"
                  style="margin: 0px 5px; color: red"
                >
                  关闭通道费
                </el-button>
              </el-dropdown-item>

              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="authUser"
                  size="mini"
                  @click="handleSorting(scope.row)"
                  style="margin: 0px 5px"
                  >清分</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  @click="handleOilAndGunListOpen(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >配置油品/枪号</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  @click="handleOilTankListOpen(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >查看油罐</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="$store.state.user.userLevel === '1'"
                  @click="exportQr(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >导出二维码</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  v-if="
                    ['', null, '1', '7'].includes($store.state.user.userLevel)
                  "
                  type="text"
                  @click="permissionSetting(scope.row)"
                  size="mini"
                  style="margin: 0px 5px"
                  >权限设置</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </af-table-column>
    </el-table>
    <!-- </el-card> -->
    <pagination
      :hidden="stationListTotal > 0 ? false : true"
      :total="stationListTotal"
      :page.sync="stationQuery.pageNum"
      :limit.sync="stationQuery.pageSize"
      @pagination="getStationList"
      :autoScroll="true"
    />

    <!-- <el-dialog :title="stationTitle" :visible.sync="stationOpen" width="800px" append-to-body> -->
    <el-drawer
      :title="stationTitle"
      size="40%"
      :visible.sync="stationOpen"
      direction="rtl"
      custom-class="add-drawer"
    >
      <el-form
        style="padding: 0 20px 0 20px"
        ref="stationForm"
        :model="stationForm"
        :rules="stationRules"
        label-width="80px"
        label-position="top"
      >
        <el-row :gutter="30">
          <el-col :span="24">
            <div style="font-size: 22px; font-weight: bolder; margin-top: 20px">
              基本信息
              <hr />
            </div>
          </el-col>

          <el-col :span="11" v-if="ifDelete">
            <el-form-item
              label="归属的油企"
              prop="enterpriseId"
              :rules="{
                required: true,
                message: '请填写归属的油企',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="stationForm.enterpriseId"
                placeholder="请选择油企"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  :label="ele.enterpriseName"
                  :value="ele.enterpriseId"
                  v-for="ele in enterpriseList"
                  :key="ele.enterpriseId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item
              label="油站名称"
              prop="stationName"
              :rules="{
                required: true,
                message: '请填写油站名',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="stationForm.stationName"
                placeholder="请输入油站名称"
              />
            </el-form-item>
          </el-col>
          <!--
          <el-col :span="11" :offset="1">
            <el-form-item
              label="是否启用支付宝"
              :rules="{
                required: true,
                message: '请选择是否启动支付宝',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="stationForm.isAlipayFlag"
                placeholder="请选择是否启用支付宝"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          -->

          <el-col :span="11">
            <el-form-item label="联系人" prop="leader">
              <el-input
                v-model="stationForm.leader"
                placeholder="请输入联系人"
                maxlength="20"
              />
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="stationForm.phone"
                placeholder="请输入联系电话"
                maxlength="11"
              />
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="省市区" prop="regionDataList">
              <el-cascader
                size="large"
                :options="regionDataOptions"
                v-model="stationForm.regionDataList"
                @change="handleChangeRegionData"
                :style="{ width: '100%' }"
                clearable
                placeholder="请选择省市区"
              >
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item
              label="详情地址"
              prop="detailRegionData"
              :rules="{
                required: true,
                message: '请填写详情地址',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="stationForm.detailRegionData"
                placeholder="请填写详细地址"
                maxlength="50"
              />
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item
              label="油站纬度"
              prop="stationLatitude"
              :rules="{
                required: true,
                message: '请填写油站纬度',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="stationForm.stationLatitude"
                maxlength="50"
                placeholder="请填写油站纬度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="油站经度"
              prop="stationLongitude"
              :rules="{
                required: true,
                message: '请填写油站经度',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="stationForm.stationLongitude"
                maxlength="50"
                placeholder="请填写油站经度"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11" :offset="1">
            <el-form-item label="油站公告" prop="stationNotice">
              <el-input
                v-model="stationForm.stationNotice"
                placeholder="请输入油站油站公告"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="支付成功后的推送（不设置则不推送）"
              prop="stationPayPush"
            >
              <el-input
                v-model="stationForm.stationPayPush"
                placeholder="请输入油站油站公告"
              />
            </el-form-item>
          </el-col> -->

          <el-col :span="11">
            <el-form-item
              label="油站简照（头像）"
              prop="headImg"
              :rules="{
                required: true,
                message: '请上传油站简照',
                trigger: 'change',
              }"
            >
              <el-upload
                class="avatar-uploader"
                :action="imgUpConfig.addressUrl"
                :headers="imgUpConfig.headers"
                :show-file-list="false"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="stationForm.headImg"
                  :src="stationForm.headImg"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">
                  只能上传图片文件，图片不超过5M
                </div>
              </el-upload>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="11" :offset="1">
            <el-form-item label="站点轮播图" prop="imgFileList">
              <el-upload
                class="avatar-uploader"
                :action="imgUpConfig.addressUrl"
                :headers="imgUpConfig.headers"
                list-type="picture-card"
                :limit="imgUpConfig.limit"
                :file-list="stationForm.imgFileList"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleImgRemove"
                :on-success="handleImgSuccess"
              >
                <i class="el-icon-plus"></i>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，最多上传6张且单张图片不超过5M
                </div>
              </el-upload>
            </el-form-item>
          </el-col> -->

          <el-col :span="24">
            <div style="font-size: 22px; font-weight: bolder; margin-top: 20px">
              状态
              <hr />
            </div>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="油站状态"
              prop="status"
              :rules="{
                required: true,
                message: '请选择油站状态',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="stationForm.status"
                placeholder="请选择油站状态"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="强制使用员工码"
              prop="employeeAppletFlag"
              :rules="{
                required: true,
                message: '请选择是否强制使用员工码',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="stationForm.employeeAppletFlag"
                placeholder="请选择油站状态"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="11">
            <el-form-item label="开启外部广告" prop="dialogueAdFlag">
              <el-select
                v-model="stationForm.dialogueAdFlag"
                placeholder="请选择是否开启外部广告"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="11">
            <el-form-item label="打印加油员班结小票" prop="classPersonFlag">
              <el-select
                v-model="stationForm.classPersonFlag"
                placeholder="请选择是否打印加油员班结小票"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option label="不打印" value="1"></el-option>
                <el-option label="打印" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item
              label="pos机订单默认时段"
              prop="posDefaultQueryPeriod"
            >
              <el-select v-model="stationForm.posDefaultQueryPeriod">
                <el-option
                  v-for="item in periodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="11" style="margin-right: 20%">
            <el-form-item
              label="POS机订单默认时段"
              prop="posDefaultQueryPeriod"
            >
              <el-select
                v-model="stationForm.posDefaultQueryPeriod"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="item in periodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="订单默认时段" prop="defaultTimePeriodOrder">
              <el-select
                v-model="stationForm.defaultTimePeriodOrder"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="item in periodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="是否允许查看历史订单"
              prop="showHistoricalOrders"
            >
              <el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="stationForm.showHistoricalOrders"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="班结记录默认时段"
              prop="defaultTimePeriodClass"
            >
              <el-select
                v-model="stationForm.defaultTimePeriodClass"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="item in periodList2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="是否允许查看历史班结记录"
              prop="showHistoricalClass"
            >
              <el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="stationForm.showHistoricalClass"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="订单是否必须关联加油员" prop="needStaff">
              <el-radio-group v-model="stationForm.needStaff">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="开启匹配零管订单" prop="isTube">
              <el-radio-group v-model="stationForm.isTube">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
              <el-radio-group
                v-if="stationForm.isTube == 1"
                v-model="stationForm.isInput"
              >
                <el-radio :label="1">开启手动输入</el-radio>
                <el-radio :label="0">关闭手动输入</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item
              label="电子卡是否使用优惠券"
              prop="couponDzkExclusiveFlag"
            >
              <el-radio-group v-model="stationForm.couponDzkExclusiveFlag">
                <el-radio :label="0">不可使用</el-radio>
                <el-radio :label="1">可使用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="fr" style="margin: 20px">
        <el-button type="primary" size="mini" @click="stationSubmitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="stationCancel">取 消</el-button>
      </div>
      <!-- </el-dialog> -->
    </el-drawer>
    <el-dialog
      :title="rechargeTitle"
      :visible.sync="rechargeOpen"
      width="800px"
      append-to-body
    >
      <el-form
        ref="stationForm"
        :model="rechargeForm"
        label-width="80px"
        label-position="top"
      >
        <el-row>
          <el-col :span="23">
            <el-form-item
              label="充值金额"
              prop="rechargeAmt"
              :rules="{
                required: true,
                message: '请填写充值金额',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="rechargeForm.rechargeAmt"
                placeholder="请填写充值金额"
              />
              <!--              油站剩余额度：{{rechargeForm.rechargeBalance}}-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="rechargeSubmitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="rechargeCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 清分 -->
    <el-drawer
      title="清分"
      size="40%"
      :visible.sync="SortingDrawer"
      direction="rtl"
      custom-class="add-drawer"
    >
      <el-form
        style="padding: 0 20px 0 20px"
        ref="sortingForm"
        :model="sortingForm"
        label-position="top"
      >
        <el-form-item label="清分商户号" prop="clearMerNo">
          <el-input
            maxlength="40"
            v-model="sortingForm.clearMerNo"
            placeholder="请输入清分商户号"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="结算商户号" prop="clearAccount">
          <el-input
            maxlength="40"
            v-model="sortingForm.clearAccount"
            placeholder="请输入结算商户号"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="fr" style="margin: 20px">
        <el-button type="primary" size="mini" @click="sortingSubmitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="sortingCancel">取 消</el-button>
      </div>
    </el-drawer>

    <el-dialog
      :title="'选择支付渠道'"
      :visible.sync="payWayOpen"
      width="800px"
      append-to-body
    >
      <el-form
        ref="payWayForm"
        :model="payWayForm"
        :rules="payWayRules"
        label-width="80px"
        label-position="top"
      >
        <el-col :span="23">
          <el-form-item label="" prop="payWayIdList">
            <el-checkbox-group v-model="payWayForm.payWayIdList" size="mini">
              <el-checkbox
                v-for="(item, index) in currentPayWayList"
                :key="index"
                :label="item.payWayId"
              >
                {{ item.payWayId }}
                -
                {{
                  item.appType == "1"
                    ? "微信"
                    : "" + item.appType == "2"
                    ? "支付宝"
                    : "" + item.appType == "3"
                    ? "银行卡"
                    : "" + item.appType == "4"
                    ? "POS机"
                    : ""
                }}
                -
                {{
                  item.useType == "1"
                    ? "消费"
                    : "" + item.useType == "0"
                    ? "充值"
                    : ""
                }}
                -
                {{
                  item.payType == "1"
                    ? "随行付"
                    : "" + item.payType == "2"
                    ? "云闪付"
                    : "" + item.payType == "3"
                    ? "通联支付"
                    : "" + item.payType == "4"
                    ? "金控"
                    : "" + item.payType == "5"
                    ? "云化支付"
                    : ""
                }}-{{ item.remark }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <div style="font-size: 12px; color: gray; text-align: center">
            同一支付方式、消费方式只能选择一种支付渠道
          </div>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="payWaySubmitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="payWayCancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="'油品/枪号 列表'"
      :visible.sync="oilAndGunListOpen"
      width="900px"
      append-to-body
    >
      <el-card class="card-table">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              size="mini"
              @click="handleOilAndGunConfAdd"
              >新增油品/油枪</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table :data="oilAndGunList" style="width: 100%">
          <af-table-column prop="stationName" label="油站" align="left">
          </af-table-column>
          <af-table-column prop="oilId" label="油品" align="left">
            <template slot-scope="scope">
              {{ transitionOil(scope.row.oilId) }}
            </template>
          </af-table-column>
          <af-table-column label="枪号" align="left">
            <template slot-scope="scope">
              {{
                !!scope.row.gunNameList && scope.row.gunNameList.length > 0
                  ? scope.row.gunNameList + "号枪"
                  : ""
              }}
            </template>
          </af-table-column>
          <af-table-column label="操作" align="left" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleOilAndGunConfEdit(scope.row)"
                size="mini"
                >编辑</el-button
              >
              <el-button
                type="text"
                @click="handleOilAndGunDelete(scope.row)"
                size="mini"
                >删除</el-button
              >
            </template>
          </af-table-column>
        </el-table>
      </el-card>
      <pagination
        :hidden="oilAndGunListTotal > 0 ? false : true"
        :total="oilAndGunListTotal"
        :page.sync="oilAndGunQuery.pageNum"
        :limit.sync="oilAndGunQuery.pageSize"
        @pagination="getOilAndGunList"
        :autoScroll="true"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleOilAndGunListClose"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="'配置 油品/枪号'"
      :visible.sync="oilAndGunConfOpen"
      width="800px"
      append-to-body
    >
      <el-form
        ref="oilAndGunForm"
        :model="oilAndGunForm"
        :rules="oilAndGunRules"
        label-width="80px"
        label-position="top"
      >
        <el-col :span="23">
          <el-form-item
            label="选择对应的油品"
            prop="oilId"
            :rules="{
              required: true,
              message: '请选择对应的油品',
              trigger: 'change',
            }"
          >
            <el-radio-group v-model="oilAndGunForm.oilId" size="medium">
              <el-radio
                v-for="(item, index) in currentOilList"
                :key="index"
                :label="item.oilId"
                >{{
                  item.oilName + " - " + item.oilType + " - " + item.oilClass
                }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="选择使用该油品的油枪" prop="gunNameList">
            <el-checkbox-group
              v-model="oilAndGunForm.gunNameList"
              size="medium"
            >
              <el-checkbox
                v-for="(item, index) in 50"
                :key="index"
                :label="item.toString()"
                >{{
                  item.toString().length == 1
                    ? "0" + item + "号枪"
                    : item + "号枪"
                }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="oilAndGunSubmitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="handleOilAndGunConfClose"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 油罐列表 -->
    <el-dialog
      :title="'已经配置的油罐'"
      :visible.sync="oilTankListOpen"
      width="800px"
      append-to-body
    >
      <el-card class="card-table">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" size="mini" @click="handleOilTankConfAdd"
              >新增油罐</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table :data="oilTankList" style="width: 100%">
          <af-table-column prop="tankName" label="油罐名" align="left">
          </af-table-column>
          <af-table-column prop="oilId" label="油品" align="left">
            <template slot-scope="scope">
              {{ transitionOil(scope.row.oilId) }}
            </template>
          </af-table-column>
          <af-table-column prop="stationId" label="油站" align="left">
            <template slot-scope="scope">
              {{ transitionStationIdToName(scope.row.stationId) }}
            </template>
          </af-table-column>
          <af-table-column label="操作" align="left" width="250">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleOilTankConfEdit(scope.row)"
                size="mini"
                >编辑油罐</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="handleOilTankDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </af-table-column>
        </el-table>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleOilTankListClose" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 配置油罐 -->
    <el-dialog
      :title="oilTankTitle"
      :visible.sync="oilTankConfOpen"
      width="800px"
      append-to-body
    >
      <el-form
        ref="oilTankConfForm"
        :model="oilTankConfForm"
        :rules="rules"
        label-width="80px"
        label-position="top"
      >
        <el-col :span="23">
          <el-form-item
            label="油罐名"
            prop="tankName"
            :rules="{
              required: true,
              message: '请填写油罐名',
              trigger: 'change',
            }"
          >
            <el-input
              v-model="oilTankConfForm.tankName"
              maxlength="50"
              placeholder="请输入油罐名"
            />
          </el-form-item>
        </el-col>

        <el-col :span="23">
          <el-form-item
            label="油品"
            prop="oilId"
            :rules="{
              required: true,
              message: '请选择油品',
              trigger: 'change',
            }"
          >
            <el-select
              v-model="oilTankConfForm.oilId"
              placeholder="请选择此油罐的油品"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                :label="item.oilName + '-' + item.oilClass + '-' + item.oilType"
                :value="item.oilId"
                :key="item.oilId"
                v-for="item in currentOilList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--
        <el-col :span="23">
          <el-form-item
            label="油站"
            :rules="{
              required: true,
              message: '请选择油站',
              trigger: 'change',
            }"
            prop="stationId"
          >
            <el-select
              v-model="oilTankConfForm.stationId"
              placeholder="请选择此油罐归属的油站"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                :label="item.stationName"
                :value="item.stationId"
                :key="item.stationId"
                v-for="item in stationList"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        -->

        <el-col :span="11">
          <el-form-item label="罐高(mm)" prop="tankHight">
            <el-input
              v-model="oilTankConfForm.tankHight"
              maxlength="50"
              placeholder="请输入罐高"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11" :offset="1">
          <el-form-item label="最大容量(L)" prop="tankCapacity">
            <el-input
              v-model="oilTankConfForm.tankCapacity"
              maxlength="50"
              placeholder="请输入最大容量"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="油高位警报设置(mm)" prop="heightAlarm">
            <el-input
              v-model="oilTankConfForm.heightAlarm"
              maxlength="50"
              placeholder="请输入油高位警报设置"
            />
          </el-form-item>
        </el-col>

        <el-col :span="11" :offset="1">
          <el-form-item label="低油位警报设置(mm)" prop="lowAlarm">
            <el-input
              v-model="oilTankConfForm.lowAlarm"
              maxlength="50"
              placeholder="请输入低油位警报设置"
            />
          </el-form-item>
        </el-col>

        <el-col :span="23">
          <el-form-item label="进油报警容错限制(L)" prop="addAlarm">
            <el-input
              v-model="oilTankConfForm.addAlarm"
              maxlength="50"
              placeholder="请输入进油报警容错限制"
            />
            <span
              >(进油入库升数-原发升数大于进油报警容错限制升数，即生成报警记录)</span
            >
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="oilTankSubmitForm" size="mini"
          >确 定</el-button
        >
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 二维码 -->
    <el-dialog :visible.sync="exportQrDialog" width="600px" append-to-body>
      <div style="padding-bottom: 20px; font-size: 20px">收款码</div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="收款码" name="payment">
          <div style="text-align: center">
            <payment-qr
              :text="paymentStr"
              :activeKey="activeName"
              @downloadImg="downloadImg"
              :nickName="currentExport.stationName"
              name="收款码"
            >
            </payment-qr>
            <!-- <div>{{ "员工姓名：" }}{{ currentExport.nickName }}</div>
              <div
                class="mx-auto d-flex"
                style="width: 500px; justify-content: center; align-items: center"
              >
                <span>负责枪号：</span>
                <div
                  class="d-inline-flex"
                  style="
                    max-width: 350px;
                    flex-wrap: wrap;
                    justify-content: space-between;
                  "
                >
                  <span
                    v-for="ele in currentExport.gunList"
                    :key="ele"
                    style="width: 85px"
                  >
                    {{ ele + "号枪" }}
                  </span>
                </div>
              </div> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 权限设置抽屉 -->
    <el-drawer
      title="权限设置"
      :visible.sync="drawerPermissions"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
    >
      <div class="card-div">
        <div>
          <div style="font-size: 16px; font-weight: bold">客户端</div>
          <div style="display: flex; flex-wrap: wrap">
            <el-card
              class="card-drawer"
              v-if="['', null].includes($store.state.user.userLevel)"
            >
              <div style="font-size: 16px; margin-bottom: 10px">实付金额</div>
              <div style="display: flex">
                <div style="font-size: 13px; color: #969696">
                  公众号、支付宝的实付金额体现服务费。
                </div>
                <el-button
                  @click="onOffSwitchOne"
                  v-if="permissions.isShowPaymentAmtCommission"
                  size="mini"
                  class="card-button"
                  >停用</el-button
                >
                <el-button
                  type="primary"
                  v-else
                  size="mini"
                  class="card-button"
                  @click="OffSwitchOne"
                  >启用</el-button
                >
              </div>
            </el-card>
            <el-card
              class="card-drawer"
              v-if="['', null].includes($store.state.user.userLevel)"
            >
              <div style="font-size: 16px; margin-bottom: 10px">服务费</div>
              <div style="display: flex">
                <div style="font-size: 13px; color: #969696">
                  公众号支付界面展示服务费字段。
                </div>
                <el-button
                  @click="onOffSwitchTwo"
                  v-if="permissions.isShowPaymentCommission"
                  size="mini"
                  class="card-button"
                  >停用</el-button
                >
                <el-button
                  type="primary"
                  v-else
                  size="mini"
                  class="card-button"
                  @click="OffSwitchTwo"
                  >启用</el-button
                >
              </div>
            </el-card>
            <el-card
              class="card-drawer"
              v-if="['', null].includes($store.state.user.userLevel)"
            >
              <div style="font-size: 16px; margin-bottom: 10px">多油品支付</div>
              <div style="display: flex">
                <div style="font-size: 13px; color: #969696">
                  公众号一键加油选择柴油进行加油时，允许同一订单选择多种柴油进行结算
                </div>
                <el-button
                  @click="onOffSwitchPay"
                  v-if="permissions.multipleOilPayFlag"
                  size="mini"
                  class="card-button"
                  >停用</el-button
                >
                <el-button
                  type="primary"
                  v-else
                  size="mini"
                  class="card-button"
                  @click="OffSwitchPay"
                  >启用</el-button
                >
              </div>
            </el-card>
            <el-card class="card-drawer">
              <div style="font-size: 16px; margin-bottom: 10px">
                电子卡及微信合并支付
              </div>

              <div style="display: flex">
                <div style="font-size: 13px; color: #969696">
                  公众号一键加油电子卡余额不足时，允许使用微信支付合并付款
                </div>
                <el-button
                  @click="onOffSwitchWxPay"
                  v-if="permissions.combinedPaymentFlag"
                  size="mini"
                  class="card-button"
                  >停用</el-button
                >
                <el-button
                  type="primary"
                  v-else
                  size="mini"
                  class="card-button"
                  @click="OffSwitchWxPay"
                  >启用</el-button
                >
              </div>
            </el-card>
            <!-- <el-card class="card-drawer">
            <div style="font-size: 16px; margin-bottom: 10px">优惠金额</div>
            <div style="display: flex">
              <div style="font-size: 13px; color: #969696">
                报表小程序首页优惠金额字段展示。
              </div>
              <el-button
                @click="onOffSwitchThreeThree"
                v-if="this.permissions.isShowHomeDiscountAmt"
                size="mini"
                class="card-button"
                >停用</el-button
              >
              <el-button
                type="primary"
                v-else
                size="mini"
                class="card-button"
                @click="OffSwitchThreeThree"
                >启用</el-button
              >
            </div>
          </el-card> -->
          </div>
        </div>
        <div class="card-hood">企业端</div>
        <div style="display: flex; flex-wrap: wrap">
          <el-card
            class="card-drawer"
            v-if="['', null].includes($store.state.user.userLevel)"
          >
            <div style="font-size: 16px; margin-bottom: 10px">实付金额</div>
            <div style="display: flex">
              <div style="font-size: 13px; color: #969696">
                后台订单的实付金额体现服务费。
              </div>
              <el-button
                @click="onOffSwitchThree"
                class="card-button"
                v-if="permissions.isShowSaasAmtCommission"
                size="mini"
                >停用</el-button
              >
              <el-button
                class="card-button"
                type="primary"
                v-else
                size="mini"
                @click="OffSwitchThree"
                >启用</el-button
              >
            </div>
          </el-card>
          <el-card
            class="card-drawer"
            v-if="['', null].includes($store.state.user.userLevel)"
          >
            <div style="font-size: 16px; margin-bottom: 10px">
              实体卡额度下限
            </div>
            <div style="display: flex">
              <el-form :model="permissions" :rules="rulesInput" ref="ruleForm">
                <el-form-item prop="checkPassInput">
                  <el-input
                    style="width: 248px"
                    v-model="permissions.physicalCardAmount"
                    size="mini"
                    maxlength="11"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          <el-card class="card-drawer">
            <div style="font-size: 16px; margin-bottom: 10px">员工班结</div>
            <div style="display: flex">
              <div style="font-size: 13px; color: #969696">
                允许员工账号通过各种途径进行班结
              </div>
              <el-button
                @click="OffSwitchFour"
                class="card-button"
                v-if="permissions.openStaffClass"
                size="mini"
                >停用</el-button
              >
              <el-button
                class="card-button"
                type="primary"
                v-else
                size="mini"
                @click="onSwitchFour"
                >启用</el-button
              >
            </div>
          </el-card>
          <el-card class="card-drawer">
            <div style="font-size: 16px; margin-bottom: 10px">
              按商户号进行订单展示
            </div>

            <div style="display: flex" class="card_select">
              <el-select
                v-model="permissions.mno"
                placeholder="请选择"
                :multiple="true"
                collapse-tags
                style="width: 100%"
              >
                <el-option
                  style="padding: 0 50px 0 20px"
                  v-for="(item, index) in mnoList"
                  :key="index"
                  :label="generateLabel(item)"
                  :value="item.payWayId"
                >
                </el-option>
              </el-select>
            </div>
          </el-card>
          <!-- <el-card class="card-drawer">
            <div style="font-size: 16px; margin-bottom: 10px">
              按结算账户进行订单展示
            </div>

            <div style="display: flex" class="card_select">
              <el-select v-model="permissions.yunSysUserList" placeholder="请选择" :multiple="true" collapse-tags style="width: 100%">
                <el-option
                style="padding:0 50px 0 20px;"
                  v-for="(item,index) in yunsysUserlist"
                  :key="index"
                  :label="generateLabel(item,1)"
                  :value="item.yunSysUserId">
                </el-option>
              </el-select>
            </div>
          </el-card> -->
        </div>
        <div style="margin-left: 470px; margin-top: 50px">
          <el-button size="medium" @click="permissionsReturn">返回</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="permissionsConfirmation"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
  listTree,
  setMnoSplit,
  setShowCommissonApi,
  setShowPaymentCommission,
  addMnoAllRateApi,
} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { regionData } from "element-china-area-data";
import { getToken } from "@/utils/auth";
import {
  addStation,
  upStation,
  getStationList,
  getEnterpriseList,
  addPayWay,
  upPayWay,
  getPayWayList,
  addOilTank,
  upOilTank,
  getOilTankList,
  getPayWayListByStationId,
  upPayWayListByStationId,
  getOilList,
  addOilAndGun,
  upOilAndGun,
  getOilAndGunList,
  delOilTank,
  delOilAndGun,
  delStation,
  addRecharge,
  getListOption,
  listEnterpriseStation,
  getStationSettleInfo,
  addOrUpdateSettleInfo,
  setOpenStaffClass,
  userGetPro,
  getListYunUserApi,
  getStationwithyunsysuserApi,
} from "@/api/dept";
import translateAddress from "@/utils/translateAddress.js";
import yfCity from "@/components/City/index";
import paymentQr from "@/components/QrCode/paymentQr.vue";
import settings from "@/settings";
import getUserProfileName from "@/utils/getUserProfile";

// import addRecharge from "@/station/recharge.js";

export default {
  name: "Dept",
  components: { Treeselect, yfCity, paymentQr },
  data() {
    let validatePass = (rule, value, callback) => {
      let amount = Number(String(this.permissions.physicalCardAmount).trim());
      const reg = /^\d+(\.\d{1,2})?$/;
      if (
        !this.permissions.physicalCardAmount &&
        this.permissions.physicalCardAmount !== 0
      )
        return callback(new Error("请输入实体卡额度下限"));
      if (amount < 0) return callback(new Error("实体卡额度下限不能小于0"));
      if (String(this.permissions.physicalCardAmount).startsWith("."))
        return callback(new Error("请输入有效数值"));
      if (Number.isNaN(amount)) return callback(new Error("请输入合法数字"));
      if (!reg.test(amount)) return callback(new Error("金额最多保留两位小数"));
      callback();
    };
    let validateRegionDataList = (rule, value, callback) => {
      if (!this.stationForm.regionDataList) {
        callback(new Error("请选择省市区"));
        return;
      }
      for (let i = 0; i < this.stationForm.regionDataList.length; i++) {
        const ele = this.stationForm.regionDataList[i];
        if (!ele) {
          this.callback(new Error("请选择省市区"));
          return;
        }
      }
      callback();
    };
    let validatePayWayIdList = (rule, value, callback) => {
      let compareArr = [];
      this.payWayForm.payWayIdList.map((id) => {
        const payWay = this.currentPayWayList.find((ele) => ele.payWayId == id);
        if (!!payWay) {
          let str = payWay.appType + payWay.useType;
          compareArr.push(str);
        }
      });
      const length1 = compareArr.length;
      const length2 = new Set(compareArr).size;
      if (length1 != length2) {
        callback(
          new Error(
            "同一支付方式、消费方式只能选择一种支付渠道，请检查选项的冲突"
          )
        );
      }
      callback();
      return;
    };
    let validateGunNameList = (rule, value, callback) => {
      if (this.oilAndGunForm.gunNameList.length == 0) {
        callback(new Error("请选择油枪，至少选择一把油枪"));
      }
      callback();
      return;
    };
    let validateImgFileList = (rule, value, callback) => {
      if (!this.stationForm.imgFileList) {
        this.stationForm.imgFileList = [];
        callback(new Error("请至少上传一张轮播图"));
      }

      if (this.stationForm.imgFileList.length <= 0) {
        callback(new Error("请至少上传一张轮播图"));
      }

      callback();
      return;
    };

    return {
      permissions: {
        physicalCardAmount: null,
        stationId: null,
        isShowPaymentAmtCommission: null,
        isShowPaymentCommission: null,
        isShowSaasAmtCommission: null,
        isShowHomeDiscountAmt: null,
        isShowPaymentCommissionPay: null,
        multipleOilPayFlag: null,
        openStaffClass: null,
        combinedPaymentFlag: null,
        mno: [],
      },
      mnoList: [],
      //  radio: '1'
      radio: "1",
      // 权限设置弹框
      drawerPermissions: false,
      // 归属的油企
      ifDelete: "",
      currentExport: {},
      paymentStr: "", //二维码地址
      exportQrDialog: false, // 二维码弹窗
      activeName: "payment",
      collapse: false,
      regionDataOptions: regionData, // 地址组件
      selectedRegionData: [],
      dateRangeCreatedDate: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isShow: false,
      showIsLngFlag: false,
      splitShow: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      rulesInput: {
        checkPassInput: [{ validator: validatePass, trigger: "change" }],
      },
      stationRules: {
        regionDataList: [
          { required: true, message: "请选择省市区", trigger: "change" },
          { validator: validateRegionDataList, trigger: "change" },
        ],
        imgFileList: [
          { required: true, message: "至少上传一张轮播图", trigger: "change" },
          { validator: validateImgFileList, trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blue" }],
        needStaff: [
          {
            required: true,
            message: "请选择是否必须关联加油员",
            trigger: "change",
          },
        ],
        isTube: [
          {
            required: true,
            message: "请选择是否开启零托管",
            trigger: "change",
          },
        ],
        couponDzkExclusiveFlag: [
          {
            required: true,
            message: "请选择电子卡是否使用优惠券",
            trigger: "change",
          },
        ],
      },
      payWayRules: {
        payWayIdList: [
          { required: true, message: "请选择支付渠道", trigger: "change" },
          { validator: validatePayWayIdList, trigger: "change" },
        ],
      },
      oilAndGunRules: {
        gunNameList: [
          { required: true, message: "请选择油枪号", trigger: "change" },
          { validator: validateGunNameList, trigger: "change" },
        ],
      },
      stationList: [],
      stationListQuery: [],
      stationListTotal: 0,
      stationLoading: false,
      stationQuery: {
        pageSize: 10,
        pageNum: 1,
        stationName: "",
        status: "",
        stationId: "",
      },

      stationForm: {
        showHistoricalOrders: 0,
        showHistoricalClass: 0,
        regionDataList: [], //["120000","120100","120102"] 省市区码
        imgFileList: [], // 轮播图
        classPersonFlag: "0",
        couponDzkExclusiveFlag: 1, // 电子卡是否使用优惠券
        posDefaultQueryPeriod: "all",
        defaultTimePeriodClass: "all",
        defaultTimePeriodOrder: "all",
      },
      rechargeForm: {
        stationId: "",
        rechargeAmt: "",
        rechargeBalance: "",
      },
      imgVisible: false,

      currentStation: {},
      currentPayWayList: [],
      currentEnterprise: [],
      currentOilList: [],

      stationOpen: false,
      rechargeOpen: false,
      stationTitle: "",
      rechargeTitle: "",

      imgUpConfig: {
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        addressUrl: process.env.VUE_APP_BASE_API + "/common/upload",
        limit: 6,
      },
      payWayOpen: false,

      payWayForm: {
        stationId: undefined,
        payWayIdList: [],
      },

      oilAndGunListOpen: false,
      oilAndGunConfOpen: false,
      oilAndGunList: [],
      oilAndGunListTotal: 0,
      oilAndGunQuery: {
        pageSize: 10,
        pageNum: 1,
        stationId: undefined,
      },
      oilAndGunForm: {
        gunNameList: [],
        oilId: undefined,
        stationId: undefined,
      },
      oilTankConfForm: {
        tankName: "", // 油罐名
        tankHight: "", //罐高(mm)
        tankCapacity: "", //最大容量(L)
        heightAlarm: "", //油高位警报设置(mm)
        lowAlarm: "", //低油位警报设置
        addAlarm: "", //进油报警容错限制

        oilId: "", // 油品
        stationId: "", // 油站id
      },
      oilTankTitle: "",
      oilTankList: [{}],
      oilTankTotal: 0,
      oilTankQuery: {
        pageSize: 10,
        pageNum: 1,
        stationId: undefined,
      },
      oilTankListLoading: false,
      oilTankListOpen: false,
      oilTankConfOpen: false,
      enterpriseList: [],
      SortingDrawer: false,
      sortingForm: {
        stationId: "",
      },
      periodList: [
        { label: "全部", value: "all" },
        { label: "当天", value: "today" },
        { label: "最近半小时", value: "last_half_hour" },
        { label: "最近一小时", value: "last_hour" },
        {
          label: "按最近一次班结时间展示(以班结开始时间)",
          value: "last_shift_time",
        },
        {
          label: "按最近一次班结时间展示(以班结结束时间)",
          value: "last_shift_time_end",
        },
      ],
      periodList2: [
        { label: "全部", value: "all" },
        { label: "当天", value: "today" },
        { label: "当周", value: "week" },
        { label: "当月", value: "month" },
        { label: "按最近一次班结时间展示", value: "last_shift_time" },
      ],
      // yunsysUserlist:[],//云化结算账户
    };
  },
  async created() {
    const result = await userGetPro();
    if (result.data) {
      this.ifDelete = true;
      this.getEnterpriseListQuery();
    } else this.ifDelete = false;

    // const isDelete = await getUserProfileName();
    // if (isDelete) this.ifDelete = true;
    // else this.ifDelete = false;
    if (this.$store.state.user.userLevel === "1") {
      this.getStationListQuery(this.presentEnterprise.enterpriseId);
    } else if (this.$store.state.user.userLevel === null) {
      this.getEnterpriseListQuery();
    }
    this.getList();
    this.getStationList();
    this.getEnterpriseList();
    this.getOilList();
  },
  computed: {
    isDelete() {},
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    generateLabel(item, value) {
      const appTypeMap = {
        1: "微信",
        2: "支付宝",
        3: "银行卡",
        4: "POS机",
      };

      const useTypeMap = {
        1: "消费",
        0: "充值",
      };

      const payTypeMap = {
        1: "随行付",
        2: "云闪付",
        3: "通联支付",
        4: "金控",
        5: "云化支付",
      };

      const appType = appTypeMap[item.appType] || "";
      const useType = useTypeMap[item.useType] || "";
      const payType = payTypeMap[item.payType] || "";
      if (this.$store.state.user.userLevel == "1") {
        return value
          ? `${item.yunSysUserId} (${item.remark}-${appType}--${payType}-${useType})`
          : `${item.mno} (${item.remark}-${appType}--${payType}-${useType})`;
      } else {
        return value
          ? `${item.yunSysUserId} (${item.remark}-${appType}--${payType}-${item.payWayId}-${useType})`
          : `${item.mno} (${item.remark}-${appType}--${payType}-${useType})`;
      }
    },
    // 关
    onOffSwitchOne() {
      this.permissions.isShowPaymentAmtCommission = 0;
    },
    onOffSwitchTwo() {
      this.permissions.isShowPaymentCommission = 0;
    },
    onOffSwitchThree() {
      this.permissions.isShowSaasAmtCommission = 0;
    },
    onOffSwitchThreeThree() {
      this.permissions.isShowHomeDiscountAmt = 0;
    },
    OffSwitchFour() {
      this.permissions.openStaffClass = 0;
    },
    onSwitchFour() {
      this.permissions.openStaffClass = 1;
    },
    onOffSwitchPay() {
      this.permissions.multipleOilPayFlag = 0;
    },
    onOffSwitchWxPay() {
      this.permissions.combinedPaymentFlag = 0;
    },
    // 开
    OffSwitchOne() {
      this.permissions.isShowPaymentAmtCommission = 1;
    },
    OffSwitchTwo() {
      this.permissions.isShowPaymentCommission = 1;
    },
    OffSwitchThree() {
      this.permissions.isShowSaasAmtCommission = 1;
    },
    OffSwitchThreeThree() {
      this.permissions.isShowHomeDiscountAmt = 1;
    },

    OffSwitchPay() {
      if (this.permissions.combinedPaymentFlag == 1) {
        this.$message.warning(
          "多油品支付和电子卡微信组合支付不能同时存在，请谨慎考虑!"
        );
      } else {
        this.permissions.multipleOilPayFlag = 1;
      }
    },
    OffSwitchWxPay() {
      if (this.permissions.multipleOilPayFlag == 1) {
        this.$message.warning(
          "多油品支付和电子卡微信组合支付不能同时存在，请谨慎考虑!"
        );
      } else {
        this.permissions.combinedPaymentFlag = 1;
      }
    },
    // 确认
    async permissionsConfirmation() {
      console.log("userLevel", this.$store.state.user.userLevel);
      let userLevel = this.$store.state.user.userLevel;
      const mnoList = this.permissions.mno
        ? this.permissions.mno.join(",")
        : null;
      const params = {
        showPayWayIds: mnoList,
        stationId: this.permissions.stationId,
        // yunSysUserList:this.permissions.yunSysUserList
      };

      // if (userLevel != 1) {
      //   this.$refs["ruleForm"].validate(async (valid) => {
      //     if (valid) {
      //       const res = await addMnoAllRateApi(params);
      //       delete this.permissions.mno;
      //       setShowPaymentCommission(this.permissions).then((res) => {
      //         if (res && res.code === 200) {
      //           this.$message.success(res.msg);
      //           this.drawerPermissions = false;
      //           this.handleQuery();
      //         } else {
      //           this.$message.error(res.msg);
      //         }
      //       });
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //     setOpenStaffClass({
      //     openStaffClass: this.permissions.openStaffClass,
      //     stationId: this.permissions.stationId,
      //   }).then((res) => {
      //     if (res && res.code === 200) {
      //       this.drawerPermissions = false;
      //     } else {
      //       this.$message.error(res.msg);
      //     }
      //   });
      //   });
      // } else {
      //   setShowPaymentCommission({
      //     combinedPaymentFlag: this.permissions.combinedPaymentFlag,
      //     stationId: this.permissions.stationId,
      //   }).then((res) => {
      //     if (res && res.code === 200) {
      //       this.drawerPermissions = false;
      //     } else {
      //       this.$message.error(res.msg);
      //     }
      //   });
      //   setOpenStaffClass({
      //     openStaffClass: this.permissions.openStaffClass,
      //     stationId: this.permissions.stationId,
      //   }).then((res) => {
      //     if (res && res.code === 200) {
      //       this.drawerPermissions = false;
      //     } else {
      //       this.$message.error(res.msg);
      //     }
      //   });
      await addMnoAllRateApi(params);
      delete this.permissions.mno;
      // delete this.permissions.yunSysUserList
      setShowPaymentCommission(this.permissions).then((res) => {
        if (res && res.code === 200) {
          this.$message.success(res.msg);
          this.drawerPermissions = false;
        } else {
          this.$message.error(res.msg);
        }
      });
      setOpenStaffClass({
        openStaffClass: this.permissions.openStaffClass,
        stationId: this.permissions.stationId,
      }).then((res) => {
        if (res && res.code === 200) {
          this.drawerPermissions = false;
        } else {
          this.$message.error(res.msg);
        }
      });
      this.drawerPermissions = false;

      setTimeout(async () => {
        await this.handleQuery();
      }, 500);
    },
    handleClose() {
      this.permissionsReturn();
    },
    handleClose() {
      this.permissionsReturn();
    },
    // 返回
    permissionsReturn() {
      this.permissions.mno = [];
      this.drawerPermissions = false;
    },

    // 权限设置
    permissionSetting(row) {
      this.drawerPermissions = true;
      this.permissions.stationId = row.stationId;
      this.permissions.isShowPaymentAmtCommission =
        row.isShowPaymentAmtCommission;
      this.permissions.isShowPaymentCommission = row.isShowPaymentCommission;
      this.permissions.isShowHomeDiscountAmt = row.isShowHomeDiscountAmt;
      this.permissions.isShowSaasAmtCommission = row.isShowSaasAmtCommission;
      this.permissions.physicalCardAmount = row.physicalCardAmount;
      this.permissions.isShowSaasAmtCommissionPay =
        row.isShowSaasAmtCommissionPay;
      this.permissions.multipleOilPayFlag = row.multipleOilPayFlag;
      this.permissions.combinedPaymentFlag = row.combinedPaymentFlag;
      this.permissions.openStaffClass = row.openStaffClass;
      this.getPayWayList(row.enterpriseId, row.showPayWayIds);
      // this.getListYunUser(row.stationId)
      // this.getStationwithyunsysuser(row.stationId)
    },
    // async getListYunUser(id){
    //   const res=await getListYunUserApi({id,pageSize:10000,pageNum:1})
    //   if(res&&res.code==200){
    //     this.yunsysUserlist= res.rows.map(item=>{
    //       return {yunSysUserId:item.yunSysUserId,payWayId:item.payWayId,value:item.payTypeChinese,appType:item.appType,useType:item.useType,payType:item.payType,remark:item.remark}
    //     })
    //   }else{
    //     this.$message.error(res.msg);
    //   }
    // },
    // async getStationwithyunsysuser(id){
    //   const res=await getStationwithyunsysuserApi({stationId:Number(id)})
    //   if(res&&res.code==200){
    //     this.permissions.yunSysUserList=res.data
    //   }else{
    //     this.$message.error(res.msg)
    //   }
    // },
    // 导出图片
    downloadImg() {
      this.msgSuccess("导出成功~");
    },
    // 导出二维码
    exportQr(row) {
      // console.log(row);
      let url = window.location.origin;
      let baseURL = "";
      switch (url) {
        case "https://yftx.xailife.com":
          baseURL = settings.baseURL;
          break;
        case "https://yftx-test.xailife.com":
          baseURL = settings.baseTestURL;
          break;
        case "https://yftx-test.xailife.com":
          baseURL = settings.baseDevURL;
          break;
        case "https://zh-admin.91cheyibao.com":
          baseURL = settings.baseCheyibaoURL;
          break;
        default:
          baseURL = settings.baseDevURL;
          break;
      }
      this.currentExport = JSON.parse(JSON.stringify(row));

      // 收款码
      this.paymentStr = `${baseURL}/${row.enterpriseId}/pay/?stationName=${row.stationName}&stationId=${row.stationId}`;
      console.log("收款码", this.paymentStr);

      this.exportQrDialog = true;
    },
    // 改变切换油企时
    handleSelectChange(val) {
      this.stationQuery.stationId = null;
      this.getStationListQuery(val);
    },
    // 查询油企
    getEnterpriseListQuery() {
      getEnterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    getStationListQuery(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationListQuery = res;
      });
    },
    translateCodeToAddress(codeArr) {
      return translateAddress(codeArr);
    },
    transitionOil(id) {
      const oil = this.currentOilList.find((res) => {
        return res.oilId == id;
      });
      if (!oil) {
        return "";
      }
      return oil.oilName + "-" + oil.oilClass + "-" + oil.oilType;
    },
    getOilList() {
      getOilList({
        pageSize: 1000,
        pageNum: 1,
      }).then((res) => {
        if (res.rows == null) {
          this.currentOilList = [];
          return;
        }
        this.currentOilList = res.rows;
        console.log(this.currentOilList);
      });
    },
    handleOilAndGunConfAdd() {
      this.oilAndGunForm = {
        gunNameList: [],
        oilId: undefined,
        stationId: undefined,
      };
      this.oilAndGunConfOpen = true;
    },
    handleOilAndGunConfEdit(row) {
      this.oilAndGunForm = JSON.parse(JSON.stringify(row));
      if (this.oilAndGunForm.gunNameList == null) {
        this.oilAndGunForm.gunNameList = [];
      }
      this.oilAndGunConfOpen = true;
    },
    handleOilAndGunConfClose() {
      this.oilAndGunConfOpen = false;
    },
    handleOilAndGunListOpen(row) {
      this.currentStation = JSON.parse(JSON.stringify(row));
      this.getOilAndGunList();
      this.oilAndGunListOpen = true;
    },
    handleOilAndGunListClose() {
      this.oilAndGunListOpen = false;
    },
    handleOilTankListOpen(row) {
      this.currentStation = row;
      this.oilTankQuery.stationId = this.currentStation.stationId;
      this.getOilTankList();
      this.oilTankListOpen = true;
    },
    handleOilTankConfAdd() {
      this.oilTankTitle = "新增油罐";
      this.oilTankConfForm = {};
      this.oilTankConfForm.stationId = this.currentStation.stationId;
      this.oilTankConfOpen = true;
    },
    handleOilAndGunDelete(row) {
      this.$confirm("确认删除此油品，随之油枪也被删除？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return delOilAndGun(row);
        })
        .then(() => {
          this.getOilAndGunList();
          this.msgSuccess("删除油品成功");
        });
    },
    handleOilTankDelete(row) {
      this.$confirm("确认删除此油罐？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delOilTank(row.tankId);
        })
        .then(() => {
          this.getOilTankList();
          this.msgSuccess("删除油罐成功");
        });
    },
    handleOilTankListClose() {
      this.oilTankListOpen = false;
    },
    transitionStationIdToName(id) {
      const station = this.stationList.find((res) => {
        return res.stationId == id;
      });
      if (!station) {
        return "";
      }
      return station.stationName;
    },
    getOilTankList() {
      this.oilTankListLoading = true;
      getOilTankList(this.oilTankQuery)
        .then((res) => {
          this.oilTankTotal = res.total;
          this.oilTankList = res.rows;
        })
        .finally((err) => {
          this.oilTankListLoading = false;
        });
    },
    handlePayWayOpen(row) {
      this.currentStation = JSON.parse(JSON.stringify(row));
      this.payWayForm = {
        payWayIdList: [],
      };
      this.getPayWayList(this.currentStation.enterpriseId);
      this.getPayWayListByStationId(this.currentStation.stationId);
      this.payWayOpen = true;
    },
    // 清分
    handleSorting(row) {
      getStationSettleInfo({ stationId: row.stationId }).then((res) => {
        if (res && res.code === 200) {
          this.sortingForm = res.data;
        } else {
          this.$message.error(res.msg);
        }
        this.SortingDrawer = true;
      });
    },
    // 保存清分
    sortingSubmitForm() {
      this.$refs.sortingForm.validate((valid) => {
        if (valid) {
          addOrUpdateSettleInfo(this.sortingForm).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.SortingDrawer = false;
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    sortingCancel() {
      this.SortingDrawer = false;
    },
    getPayWayList(id, showPayWayIds) {
      let mnoList = [];
      let mnoLists = [];
      if (showPayWayIds) {
        console.log("showPayWayIds", showPayWayIds.split(","));
        mnoList = showPayWayIds.split(",") || [];
        mnoList.forEach((item) => {
          mnoLists.push(Number(item));
        });
        this.$nextTick(() => {
          this.$set(this.permissions, "mno", mnoLists);
        });
      }

      return getPayWayList({
        enterpriseId: id,
        pageSize: 10000,
        pageNum: 1,
        useType: this.useType,
      }).then((res) => {
        this.currentPayWayList = res.rows;
        this.mnoList = res.rows.map((item) => {
          return {
            mno: item.mno,
            payWayId: item.payWayId,
            value: item.payTypeChinese,
            appType: item.appType,
            useType: item.useType,
            payType: item.payType,
            remark: item.remark,
          };
        });
        console.log("1111222", this.currentPayWayList);
        console.log("1111333", this.mnoList);
      });
    },

    getEnterpriseList() {
      getListOption({
        pageSize: 10000,
        pageNum: 1,
      }).then((res) => {
        this.currentEnterprise = res.rows;
      });
    },
    getPayWayListByStationId(id) {
      getPayWayListByStationId({
        stationId: id,
      }).then((res) => {
        console.log("res", res);
        this.payWayForm.payWayIdList = res.rows;
        this.payWayForm = { ...this.payWayForm };
      });
    },
    handleOilTankConfEdit(row) {
      this.oilTankTitle = "修改油罐";
      this.oilTankConfForm = JSON.parse(JSON.stringify(row));
      this.oilTankConfOpen = true;
    },
    handleStationAdd(row) {
      this.stationForm = {
        regionDataList: [], //["120000","120100","120102"] 省市区码
        imgFileList: [], // 轮播图
        classPersonFlag: "0",
        needStaff: 1,
        isTube: 0,
        couponDzkExclusiveFlag: 1, // 电子卡是否使用优惠券
        posDefaultQueryPeriod: "all",
        defaultTimePeriodClass: "all",
        defaultTimePeriodOrder: "all",
        showHistoricalOrders: 0,
        showHistoricalClass: 0,
      };
      this.stationTitle = "新增油站";
      this.stationOpen = true;
      this.$nextTick(() => {
        this.$refs.stationForm.clearValidate();
      });
    },
    handleStationDel(row) {
      this.$confirm("确认删除此油站？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delStation(row);
        })
        .then(() => {
          this.getStationList();
          this.msgSuccess("删除油站成功");
        });
    },
    handleStationEdit(row) {
      this.stationTitle = "更新油站";
      this.stationForm = JSON.parse(JSON.stringify(row));
      this.stationForm.isTube = Number(this.stationForm.isTube);
      this.stationForm.isInput = Number(this.stationForm.isInput);
      this.stationOpen = true;
    },
    handlereChargeEdit(row) {
      this.rechargeTitle = "充值";
      this.stationForm = JSON.parse(JSON.stringify(row));
      this.rechargeForm["stationId"] = this.stationForm.stationId;
      // this.rechargeForm['rechargeAmt'] = 150;
      // this.rechargeForm['rechargeBalance'] = 15000;
      // this.rechargeForm = JSON.parse(JSON.stringify(row));
      this.rechargeOpen = true;
    },
    handleChangeRegionData(value) {
      console.log(this.form.regionDataList);
      console.log(this.form);
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt5M;
    },
    handleAvatarSuccess(response, file) {
      this.stationForm = {
        ...this.stationForm,
        headImg: response.url,
      };
    },
    handleImgRemove(file, fileList) {
      this.stationForm.imgFileList = fileList;
    },
    handleImgSuccess(response, file, fileList) {
      this.stationForm.imgFileList = [
        ...this.stationForm.imgFileList,
        {
          name: file.name,
          url: response.url,
        },
      ];
    },
    /** 查询部门列表 */
    getList() {},
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    stationCancel() {
      this.stationOpen = false;
    },
    rechargeCancel() {
      this.rechargeOpen = false;
    },
    payWayCancel() {
      this.payWayOpen = false;
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.dateRangeCreatedDate = [];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getStationList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate = [];
      this.resetForm("stationQuery");
      this.handleQuery();
    },
    getStationList() {
      this.stationLoading = true;
      const params = { ...this.stationQuery };
      if (params.stationId2) {
        params.stationId = params.stationId2;
      }
      getStationList(this.addDateRange(params, this.dateRangeCreatedDate))
        .then((res) => {
          this.stationListTotal = res.total;
          this.stationList = res.rows;
          this.stationList.forEach((item) => {
            item.needStaff = parseInt(item.needStaff);
          });
        })
        .finally(() => (this.stationLoading = false));
    },
    getOilAndGunList() {
      this.oilAndGunQuery.stationId = this.currentStation.stationId;
      getOilAndGunList(this.oilAndGunQuery).then((res) => {
        console.log(res);
        if (res.rows == null) {
          this.oilAndGunList = [];
          this.oilAndGunListTotal = 0;
        }
        this.oilAndGunList = res.rows;
        this.oilAndGunListTotal = res.total;
        console.log(this.oilAndGunList);
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.deptId != undefined) {
          } else {
          }
        }
      });
    },
    stationSubmitForm: function () {
      this.stationForm.enterpriseId = this.ifDelete
        ? this.stationForm.enterpriseId
        : this.presentEnterprise && this.presentEnterprise.enterpriseId;
      this.$refs["stationForm"].validate((valid) => {
        if (valid) {
          if (this.stationForm.stationId != undefined) {
            upStation(this.stationForm).then((res) => {
              this.msgSuccess("更新成功");
              this.getStationList();
              this.stationOpen = false;
            });
          } else {
            addStation(this.stationForm).then((res) => {
              this.msgSuccess("新增成功");
              this.getStationList();
              this.stationOpen = false;
            });
          }
        }
      });
    },
    rechargeSubmitForm: function () {
      addRecharge(this.rechargeForm).then((res) => {
        this.msgSuccess("充值成功");
        this.getStationList();
        this.rechargeOpen = false;
      });
    },
    payWaySubmitForm: function () {
      this.payWayForm.stationId = this.currentStation.stationId;
      this.$refs["payWayForm"].validate((valid) => {
        if (valid) {
          upPayWayListByStationId(this.payWayForm).then((res) => {
            this.msgSuccess("更新成功");
            this.payWayOpen = false;
          });
        }
      });
    },
    oilAndGunSubmitForm: function () {
      this.oilAndGunForm.stationId = this.currentStation.stationId;
      this.oilAndGunForm.gunNameList.sort((q, w) => q - w);
      this.$refs["oilAndGunForm"].validate((valid) => {
        if (valid) {
          if (this.oilAndGunForm.gunId != undefined) {
            upOilAndGun(this.oilAndGunForm).then((res) => {
              this.getOilAndGunList();
              this.msgSuccess("更新成功");
              this.oilAndGunConfOpen = false;
            });
          } else {
            addOilAndGun(this.oilAndGunForm).then((res) => {
              this.getOilAndGunList();
              this.msgSuccess("新增成功");
              this.oilAndGunConfOpen = false;
            });
          }
        }
      });
    },
    oilTankSubmitForm: function () {
      this.$refs["oilTankConfForm"].validate((valid) => {
        if (valid) {
          if (this.oilTankConfForm.tankId != undefined) {
            upOilTank(this.oilTankConfForm).then((res) => {
              this.msgSuccess("更新油罐成功");
              this.getOilTankList();
              this.oilTankConfOpen = false;
            });
          } else {
            addOilTank(this.oilTankConfForm).then((res) => {
              this.msgSuccess("新增油罐成功");
              this.getOilTankList();
              this.oilTankConfOpen = false;
            });
          }
        }
      });
    },
    // 开启，关闭通道费
    async handleTongDaoFee(row, type) {
      console.log("3333", row);
      if (type === "open") {
        await setShowCommissonApi({
          isShowCommission: 1,
          stationId: row.stationId,
        });
        this.msgSuccess("开启通道费成功");
        this.handleQuery();
      }
      if (type === "close") {
        await setShowCommissonApi({
          isShowCommission: 0,
          stationId: row.stationId,
        });
        this.msgSuccess("关闭通道费成功");
        this.handleQuery();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer.rtl {
  overflow: auto;
}
.card-button {
  margin: 0px 5px 0px 15px;
  width: 50px;
  height: 26px;
  line-height: 8px;
  padding: 7px 10px 10px 10px;
}
.card-hood {
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
}
.card-div {
  position: relative;
  margin-left: 24px;
  margin-right: 10px;
}
.card-drawer {
  width: 290px;
  margin: 20px 20px 10px 10px;
  height: 120px;
  .card_select {
    ::v-deep .el-input__inner {
      height: 60px !important;
    }
    ::v-deep .el-icon-close {
      position: absolute;
      right: 0px;
      top: 8px;
    }
    ::v-deep .el-tag.el-tag--info:first-child {
      display: block;
      width: 190px;
      .el-select__tags-text:first-child {
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.card-drawer2 {
  width: 610px;
  margin: 20px 20px 10px 10px;
  height: 120px;
}
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

.card-table {
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin-bottom: 20px;
    margin-right: 20px;
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    padding: 0;
    margin: 0;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .add-drawer {
  overflow-y: auto;
}
</style>
